<template>
    <div class='w-full h-full mask-bg' :class="{'open': isOpen}">
        <n-carousel show-arrow show-dots :touchable="false">
            <div class="w-[80%] h-[75%] mx-auto xy-center">
                <img class="wh-full" v-for="(item, i) in imgDatas" :key="i" :src="jointFilePath(item.path)">
                <div class="w-36px h-36px absolute -top-18px -right-18px bg-[#fff] rounded-full flex-center z-999" @click="closeCarousel">
                    <div class="w-32px h-32px bg-[#333] rounded-full flex-center">
                        <n-icon :size="28" color="#fff" :component="Close" @click="isOpen = false" />
                    </div>
                </div>
            </div>
            <template #arrow="{ prev, next }">
                <div class="w-[10%] h-full flex-center absolute top-0" @click="prev">
                    <div class="icon-arrow left-arrow flex-center">
                        <img class="w-24px h-24px" :src="iconArrowLeft" alt="">
                    </div>
                </div>

                <div class="w-[10%] h-full flex-center absolute top-0 right-0" @click="next">
                    <div class="icon-arrow right-arrow flex-center">
                        <img class="w-24px h-24px" :src="iconArrowLeft" alt="">
                    </div>
                </div>
            </template>
        </n-carousel>
    </div>
</template>

<script lang="ts" setup>
    import { jointFilePath } from "@/utils"
    import iconArrowLeft from "@/assets/image/icon/icon-arrow-l.png"
    import { Close } from "@vicons/ionicons5"

    const props = defineProps<{
        imgDatas: {path:string}[]
    }>()

    const isOpen = ref(false)

    const openCarousel = () => {
        isOpen.value = true
    }

    const closeCarousel = () => {
        isOpen.value = false
    }

    const toPrev = () => {

    }

    const toNext = () => {
        
    }

    defineExpose({
        openCarousel,
        closeCarousel
    })

</script>

<style lang="scss" scoped>
    .mask-bg {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 99;


        &.open {
            display: block;
        }

        .icon-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: $themeColor;

            &.right-arrow {
                img {
                    transform: rotate(-180deg);
                }
            }
        }
    }
</style>